<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增房源信息')" />
    <th:block th:include="include :: select2-css" />
</head>
<style>
    .divImg {
        float: left;
        margin: 2px;
        padding: 2px;
        height: 108px;
        width: 100px;
        border: 1px solid #dcdcdc;
        cursor: pointer;
    }
</style>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-house-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">名称：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label"><span style="color: red">*</span>轮播图</label>
                <div class="col-sm-8">
                    <div style="text-align: left;">
                        <button type="button" class="layui-btn" id="upload_car_img0" >上传图片</button>
                    </div>
                    <div class="layui-upload-list">
                        <div id="img-url0" style="padding: 5px;"></div>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">装修：</label>
                <div class="col-sm-8">
                    <select name="renovationId" class="form-control m-b" >
                        <option th:each="dict : ${renovationList}" th:text="${dict.name}" th:value="${dict.id}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">类型：</label>
                <div class="col-sm-8">
                    <select name="typeId" class="form-control m-b" >
                        <option th:each="dict : ${typeList}" th:text="${dict.name}" th:value="${dict.id}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">朝向：</label>
                <div class="col-sm-8">
                    <select name="orientationId" class="form-control m-b" >
                        <option th:each="dict : ${orientationList}" th:text="${dict.name}" th:value="${dict.id}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">年代：</label>
                <div class="col-sm-8">
                    <input name="years" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">地址：</label>
                <div class="col-sm-8">
                    <textarea name="address" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">选择坐标：</label>
                <div class="col-sm-8">
                    <button type="button" class="layui-btn" id="show_map" onclick="openMap()">打开地图</button>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">店铺经度：</label>
                <div class="col-sm-8">
                    <input name="lng" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">店铺纬度：</label>
                <div class="col-sm-8">
                    <input name="lat" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">描述：</label>
                <div class="col-sm-8">
                    <textarea name="notes" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">交通描述：</label>
                <div class="col-sm-8">
                    <textarea name="traffic" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">售价(单位：万)：</label>
                <div class="col-sm-8">
                    <input name="price" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">单价(单位：元)：</label>
                <div class="col-sm-8">
                    <input name="priceOne" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">户型-室：</label>
                <div class="col-sm-8">
                    <input name="houseRoom" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">户型-厅：</label>
                <div class="col-sm-8">
                    <input name="houseLivingRoom" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">户型-卫：</label>
                <div class="col-sm-8">
                    <input name="houseToilet" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">面积：</label>
                <div class="col-sm-8">
                    <input name="area" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">楼层：</label>
                <div class="col-sm-8">
                    <input name="floor" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">总楼层：</label>
                <div class="col-sm-8">
                    <input name="floorMax" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">标签(逗号分隔)：</label>
                <div class="col-sm-8">
                    <textarea name="tag" class="form-control"></textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">排序：</label>
                <div class="col-sm-8">
                    <input name="sort" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">文件夹名称：</label>
                <div class="col-sm-8">
                    <input name="file" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('house_status')}">
                        <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">独家房源：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('house_sole')}">
                        <input type="radio" th:id="${'sole_' + dict.dictCode}" name="sole" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'sole_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">是否推荐：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('house_recommend')}">
                        <input type="radio" th:id="${'recommend_' + dict.dictCode}" name="isRecommend" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'recommend_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">类型：</label>
                <div class="col-sm-8">
                    <div class="radio-box" th:each="dict : ${@dict.getType('house_type')}">
                        <input type="radio" th:id="${'type_' + dict.dictCode}" name="type" th:value="${dict.dictValue}" th:checked="${dict.default}">
                        <label th:for="${'type_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js" />
    <th:block th:include="include :: sortable-js"/>
    <script type="text/javascript">
        var prefix = ctx + "system/house/house"
        $("#form-house-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-house-add').serialize());
            }
        }

        var imgId0=0;

        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;


            var container0 = document.getElementById("img-url0");
            var sort0 = Sortable.create(container0);
            // var sortDetail = Sortable.create(containerDetail);

            //普通图片上传
            upload.render({
                elem: '#upload_car_img0'
                , url: ctx + 'common/upload' //改成您自己的上传接口
                , multiple: true
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        // $('#img-url').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')

                        var name = file.name.split(".")[0];
                        console.log(name)
                        $("#img-url0").append("<div id='div" + name + "'><div  class='divImg'>" +
                            "<img  id='src" + name + "' src='' style='width:100px;height: 80px;margin-bottom: 1px;'><br>" +

                            "<i style='float: right;padding-top: 4px;' class='fa fa-close' onclick=\"delImg('div" + name + "')\"></i></div></div>");
                        // $("#logo").val(res.url);
                    });
                }
                , done: function (res) {
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }
                    imgId0++;
                    $("#div" + res.name).replaceWith("<div id='imgId0" + imgId0 + "' class='divImg'>" +
                        "<img  src='" + res.url + "' style='width:100px;height: 80px;margin-bottom: 1px;'><br>" +
                        "<input type='hidden' name='carImg0' value='" + res.url + "'>" +
                        "<i style='float: right;padding-top: 4px;' class='fa fa-close' onclick=\"delImg('imgId0" + imgId0 + "')\"></i></div>");

                    sort0.destroy();
                    sort0 = Sortable.create(container0);


                }
            });


        })

        function delImg(id) {
            $("#" + id).remove();
        }


        function openMap() {
            layer.confirm('选择地址',{
                type:2,
                shift:1,
                shadeClose:true,
                btn:['确认','取消'],
                maxmin:true,
                area: ['100%', '100%'],
                shade: 0.4,
                content:'map',
                yes: function (index,layero) {
                    layer.close(index)
                },btn2: function (index,layero) {
                }
            })
        }


        function show(lng,lat) {
            console.log(lng+"  xxxxx   "+lat)
            $("input[name='lng']").val(lng)
            $("input[name='lat']").val(lat)
        }
    </script>
</body>
</html>